/* eslint-disable array-callback-return */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Col, Row, Input, Select, message } from 'antd';
import router from 'umi/router';
import queryString from 'query-string';
import FooterToolbar from '@/components/FooterToolbar';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '@/utils/utils.less';
import HOCSelect from '@/components/AntDesign/Select';

const { Option } = Select;
const FormItem = Form.Item;
@connect(({ custinfo, loading }) => ({
  loading: loading.models.custinfo,
  detailList: custinfo.detailList,
}))
@Form.create()
class AdvancedForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      mdCustId: null,
      dictList: ['INDST_CODE', 'CORP_NATURE'], // 字典
      INDST_CODE: [],
      CORP_NATURE: [],
    };
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { dictList } = this.state;
    const id = queryString.parse(location.search).custId;
    this.setState({ mdCustId: id });
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: dictList,
    }).then(data => {
      dictList.map(dict => {
        this.setState({ [dict]: data[dict] });
      });
      this.getList(id);
    });
  }

  // 回显数据
  getList = mdCustId => {
    const { dispatch } = this.props;
    dispatch({
      type: 'custinfo/getCustDetail',
      payload: {
        mdCustId,
      },
    });
  };

  // 提交
  submitAll = () => {
    const { mdCustId } = this.state;
    const { dispatch, form } = this.props;
    let submitData = {};
    form.validateFieldsAndScroll((error, values) => {
      if (!error) {
        submitData = { ...values, mdCustId };
        // console.log(submitData);
        dispatch({
          type: 'custinfo/updateSubmit',
          payload: submitData,
        }).then(response => {
          if (response.success) {
            message.success(`${response.message || '修改成功！'}`, 2, () => {
              router.push('/maindatamanage/custinfo');
            });
          } else {
            message.warning(`${response.message || '修改数据失败：服务器端错误！'}`);
          }
        });
      }
    });
  };

  // 渲染函数
  render() {
    const {
      form: { getFieldDecorator },
      detailList,
    } = this.props;
    const { INDST_CODE, CORP_NATURE } = this.state;
    // 行业分类
    const industryCodeOL = INDST_CODE.map(options => (
      <Option key={options.itemCode}>{options.itemName}</Option>
    ));
    // 公司类型
    const comTypeOL = CORP_NATURE.map(options => (
      <Option key={options.itemCode}>{options.itemName}</Option>
    ));
    return (
      <Form layout="vertical">
        <PageHeaderWrapper wrapperClassName={styles.advancedForm}>
          <Card title={<span style={{ fontWeight: 'bolder' }}>客户信息修改</span>}>
            <Row gutter={64}>
              <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                <FormItem label="客户名称">
                  {getFieldDecorator('name', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue: detailList.name,
                  })(<Input placeholder="请输入客户名称" maxLength={30} />)}
                </FormItem>
              </Col>
              <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                <FormItem label="公司类型">
                  {getFieldDecorator('corpNature', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue: detailList.corpNature && detailList.corpNature.toString(),
                  })(<HOCSelect placeholder="请选择">{comTypeOL}</HOCSelect>)}
                </FormItem>
              </Col>
              <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                <FormItem label="行业分类">
                  {getFieldDecorator('industryCode', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue: detailList.industryCode && detailList.industryCode.toString(),
                  })(<HOCSelect placeholder="请选择">{industryCodeOL}</HOCSelect>)}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={64}>
              <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                <FormItem label="统一社会信用代码">
                  {getFieldDecorator('uniCreditCode', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue: detailList.uniCreditCode,
                  })(<Input placeholder="请输入社会统一信用代码" maxLength={18} />)}
                </FormItem>
              </Col>
            </Row>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => window.history.back()} style={{ marginRight: 10 }}>
              取消
            </Button>
            <Button type="primary" onClick={this.submitAll}>
              提交
            </Button>
          </FooterToolbar>
        </PageHeaderWrapper>
      </Form>
    );
  }
}

export default AdvancedForm;
